<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ include file="../session.jsp"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="../head.jsp"%>${alert}
<style>
	.formStyle {
		padding-top: 30px;
	}
	.imgStyle {
		padding-top: 10px;
	}
	.btnStyle {
		margin-top: 10px;
	}
</style>
<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />
</head>
<body>
	<%@ include file="../menu.jsp"%>
	<div class="container">
		<div class="page-header clearfix">
			<h2 class="pull-left">공통배너 관리</h2>
			<div class="pull-right" style="padding-top: 30px">
				<a href="#" id="opensearch" class="btn btn-info">공통배너 등록 펼치기/접기</a>
			</div>
		</div>
	
		<div id="searchdiv">
			<div class="clearfix">
				<div class="table-responsive">
					<form id="insertCommonBanner" class="form-horizontal" role="form" method="post" action="commonBanner.do"
						enctype="multipart/form-data">
						<fieldset>
							<input type="hidden" name="action_type" value="insert"/>
							
							<div class="form-group">
								<label for="insertSortKey" class="col-md-2 control-label">순서</label>
								<div class="col-md-10">
									<input type="number" class="form-control" name="insertSortKey" placeholder="순서를 입력하세요"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertBannerType" class="col-md-2 control-label">배너종류</label>
								<div class="col-md-10">
									<label class="radio-inline"><input type="radio" name="insertBannerType" value="MAIN"> 메인</label>
									<label class="radio-inline"><input type="radio" name="insertBannerType" value="MINI"> 미니</label>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertBannerTitle" class="col-md-2 control-label">배너명</label>
								<div class="col-md-10">
									<input type="text" class="form-control" name="insertBannerTitle" placeholder="배너명을 입력하세요"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="bannerImg" class="col-md-2 control-label">사진</label>
								<div class="col-md-10">
									<input type="file" class="form-control" name="bannerImg"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertLinkType" class="col-md-2 control-label">링크종류</label>
								<div class="col-md-10">
									<select name="insertLinkType" class="form-control">
										<option>- 링크종류 -</option>
										<c:forEach items="${eventType}" var="list">
											<option value="${list.idCommon}">${list.commonText}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertLinkCode" class="col-md-2 control-label">링크내용</label>
								<div class="col-md-10">
									<input type="text" class="form-control" name="insertLinkCode" placeholder="링크내용을 입력하세요"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertStart_date" class="col-md-2 control-label">시작일</label>
								<div class="col-md-10">
									<input type="datetime-local" class="form-control" name="insertStart_date"/>
								</div>
							</div>
							
							<div class="form-group">
								<label for="insertEnd_date" class="col-md-2 control-label">종료일</label>
								<div class="col-md-10">
									<input type="datetime-local" class="form-control" name="insertEnd_date"/>
								</div>
							</div>
							
							<div class="form-group">
								<div class="col-md-offset-2 col-md-10">
									<div class="row">
										<div class="col-md-6">
											<button type="submit" class="btn btn-primary btn-block">등록</button>
										</div>
										<div class="col-md-6">
											<button type="reset" class="btn btn-warning btn-block">다시작성</button>
										</div>
									</div>
			
								</div>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
		
		<ul class="nav nav-tabs nav-justified">
			<li<c:if test="${type == null}"> class='active'</c:if>>
				<a href="commonBanner.do">전체보기</a>
			</li>
			<li<c:if test="${type == 'MAIN'}"> class='active'</c:if>>
				<a href="commonBanner.do?type=MAIN">메인배너</a>
			</li>
			<li<c:if test="${type == 'MINI'}"> class='active'</c:if>>
				<a href="commonBanner.do?type=MINI">미니배너</a>
			</li>
		</ul>
		<br/>
		<div class="table-responsive">
			<span class="pull-left" style="margin-bottom:10px;">
				등록 : ${page.totalArticleCount}건 / 활성 : ${display}건 / 비활성 : ${unDisplay}
			</span>
			<table class="table table-striped table-hover">
				<thead>
					<tr class="warning row">
						<th class="text-center col-md-1">노출</th>
						<th class="text-center col-md-1">순서</th>
						<th class="text-center col-md-1">배너종류</th>
						<th class="text-center col-md-2">배너명</th>
						<th class="text-center col-md-2">이미지</th>
						<th class="text-center col-md-4">링크/기간</th>
						<th class="text-center col-md-1">옵션</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${commonBanner}" var="list">
						<form id="updateCommonBanner${list.idBanner}" role="form" method="post" action="commonBanner.do"
							enctype="multipart/form-data"></form>
						<input type="hidden" name="action_type" value="update" form="updateCommonBanner${list.idBanner}"/>
						<input type="hidden" name="idBanner" value="${list.idBanner}" form="updateCommonBanner${list.idBanner}"/>
						<input type="hidden" name="page" value="${page.nowPage}" form="updateCommonBanner${list.idBanner}"/>
						<input type="hidden" name="type" value="${type}" form="updateCommonBanner${list.idBanner}"/>
						<tr class="text-center row">
							<td class="col-md-1">
								<input type="checkbox" name="display${list.idBanner}" value="1" 
									<c:if test="${list.isDisplay == 1}">checked</c:if> form="updateCommonBanner${list.idBanner}"/>
							</td>
							<td class="col-md-1">
								<input type="number" class="form-control" name="sortKey${list.idBanner}" value="${list.sortKey}"
									form="updateCommonBanner${list.idBanner}"/>
							</td>
							<td class="col-md-1">
								<label class="radio-inline">
									<input type="radio" name="bannerType${list.idBanner}" value="MAIN"
										form="updateCommonBanner${list.idBanner}" <c:if test="${list.bannerType == 'MAIN'}">checked</c:if>> 메인
								</label><br/>
								<label class="radio-inline">
									<input type="radio" name="bannerType${list.idBanner}" value="MINI"
										form="updateCommonBanner${list.idBanner}" <c:if test="${list.bannerType == 'MINI'}">checked</c:if>> 미니
								</label>
							</td>
							<td class="col-md-2">
								<input type="text" class="form-control" name="bannerTitle${list.idBanner}" value="${list.bannerTitle}"
									form="updateCommonBanner${list.idBanner}"/>
							</td>
							<td class="col-md-2">
								<a href="download.jsp?${list.image}" data-lightbox="roadtrip" title="${list.bannerTitle}" class="imgLink">
									<img src="download.jsp?${list.image}" class="img-thumbnail img-responsive"/>
								</a>
								<button type="button" class="btn btn-sm btnStyle" id="imgEdit${list.idBanner}">변경</button>
								<div id="imgDiv${list.idBanner}" class="imgStyle">
									<input type="file" class="form-control" name="editImg${list.idBanner}" form="updateCommonBanner${list.idBanner}"/>
								</div>
							</td>
							<td class="col-md-4">
								<div class="row">
									<div class="form-group">
										<label for="linkType" class="col-md-3 control-label">링크종류</label>
										<div class="col-md-9">
											<select name="linkType${list.idBanner}" class="form-control" form="updateCommonBanner${list.idBanner}">
												<option>- 링크종류 -</option>
												<c:forEach items="${eventType}" var="clist">
													<option value="${clist.idCommon}"
														<c:if test="${list.bannerLinkType == clist.idCommon}">selected</c:if>>${clist.commonText}
													</option>
												</c:forEach>
											</select>
										</div>
									</div>
									
									<div class="form-group formStyle">
										<label for="linkCode" class="col-md-3 control-label">링크내용</label>
										<div class="col-md-9">
											<input type="text" class="form-control" name="linkCode${list.idBanner}" value="${list.bannerLinkCode}"
												form="updateCommonBanner${list.idBanner}"/>
										</div>
									</div>
									
									<div class="form-group formStyle">
										<label for="start_date" class="col-md-3 control-label">시작일</label>
										<div class="col-md-9">
											<input type="datetime-local" class="form-control" name="start_date${list.idBanner}"
												form="updateCommonBanner${list.idBanner}" value="${fn:substring(list.start_date, 0, 4)}-${
												fn:substring(list.start_date, 4, 6)}-${fn:substring(list.start_date, 6, 8)}T${
												fn:substring(list.start_date, 8, 10)}:${fn:substring(list.start_date, 10, 12)}">
										</div>
									</div>
									
									<div class="form-group formStyle">
										<label for="end_date" class="col-md-3 control-label">종료일</label>
										<div class="col-md-9">
											<input type="datetime-local" class="form-control" name="end_date${list.idBanner}"
												form="updateCommonBanner${list.idBanner}" value="${fn:substring(list.end_date, 0, 4)}-${
												fn:substring(list.end_date, 4, 6)}-${fn:substring(list.end_date, 6, 8)}T${
												fn:substring(list.end_date, 8, 10)}:${fn:substring(list.end_date, 10, 12)}">
										</div>
									</div>
								</div>
							</td>
							<td class="col-md-1">
								<div class="row">
									<div class="col-md-12">
										<button type="submit" class="btn btn-info btn-block" form="updateCommonBanner${list.idBanner}">저장</button>
									</div>
									<br/>
									<div class="col-md-12">
										<button type="button" id="deleteConfirm" class="btn btn-danger btn-block">삭제</button>
									</div>
								</div>
							</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		
		<div class="text-center">
			<ul class="pagination">

				<!-- 이전 그룹 -->
				<c:choose>
					<c:when test="${page.startPage > page.pageGroupCount}">
						<li><a href="commonBanner.do?page=${page.startPage-1}">&laquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&laquo;</a></li>
					</c:otherwise>
				</c:choose>
				
				<!-- 페이지 번호 -->
				<c:forEach begin="${page.startPage}" end="${page.endPage}" step="1" var="now">
					<c:choose>
						<c:when test="${page.nowPage == now}">
							<li class="active"><a href="#">${now}</a></li>
						</c:when>
						<c:otherwise>
							<li><a href="commonBanner.do?page=${now}">${now}</a></li>
						</c:otherwise>
					</c:choose>
				</c:forEach>

				<!-- 다음 그룹 -->
				<c:choose>
					<c:when test="${page.endPage < page.lastGroupFirstPage}">
						<li><a href="commonBanner.do?page=${page.endPage+1}">&raquo;</a></li>
					</c:when>
					<c:otherwise>
						<li class="disabled"><a href="#">&raquo;</a></li>
					</c:otherwise>
				</c:choose>

			</ul>
		</div>
		
	</div>

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/lightbox-2.6.min.js"></script>
	<!-- 형식검사 클래스 참조 -->
	<script src="assets/js/string.js"></script>
	<script>
		$(function() {
			
			$("#insertCommonBanner").submit(function() {
				
				if (!$("input[name='insertSortKey']").val().isValue()) {
					alert("노출순서를 입력하세요.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertSortKey']").val().isNumber()) {
					alert("노출순서는 숫자로만 입력이 가능합니다.");
					$("input[name='insertSortKey']").focus();
					return false;
				}
				
				if (!$("input[name='insertBannerType']").is(":checked")) {
					alert("배너종류를 선택해 주세요");
					$("input[name='insertBannerType']").focus();
					return false;
				}
				
				if (!$("input[name='insertBannerTitle']").val().isValue()) {
					alert("배너명을 입력하세요.");
					$("input[name='insertBannerTitle']").focus();
					return false;
				}
				
				var image = true;
				$("input[name='bannerImg']").each(function(idx, item) {
					if (!$(item).val().isValue()) {
						alert("사진을 추가하세요.");
						$(item).focus();
						image = false;
					}
				});
				if (!image) {
					return false;
				}
				
				if ($("select[name='insertLinkType'] > option:selected").index() < 1) {
					alert("링크종류를 선택하세요.");
					$("select[name='insertLinkType']").focus();
					return false;
				}
				
				if (!$("input[name='insertLinkCode']").val().isValue()) {
					alert("링크내용을 입력하세요.");
					$("input[name='insertLinkCode']").focus();
					return false;
				}
				
				if (!$("input[name='insertStart_date']").val().isValue()) {
					alert("시작일을 입력하세요.");
					$("input[name='insertStart_date']").focus();
					return false;
				}
				
				if (!$("input[name='insertEnd_date']").val().isValue()) {
					alert("종료일를 입력하세요.");
					$("input[name='insertEnd_date']").focus();
					return false;
				}
				
				if (!confirm("정말 등록하시겠습니까?")) {
					return false;
				}
			});
			
			<c:forEach items="${commonBanner}" var="list">
				$("#imgDiv${list.idBanner}").hide();
				
				$("#imgEdit${list.idBanner}").click(function() {
					$("input[name='editImg${list.idBanner}']").replaceWith($("input[name='editImg${list.idBanner}']").clone(true));
					$("#imgDiv${list.idBanner}").toggle();
				});
				
				$("#updateCommonBanner${list.idBanner}").submit(function() {
					
					if (!$("input[name='sortKey${list.idBanner}']").val().isValue()) {
						alert("정렬순서를 입력하세요.");
						$("input[name='sortKey${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='sortKey${list.idBanner}']").val().isNumber()) {
						alert("정렬순서는 숫자로만 입력이 가능합니다.");
						$("input[name='sortKey${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='bannerType${list.idBanner}']").is(":checked")) {
						alert("배너종류를 선택해 주세요");
						$("input[name='bannerType${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='bannerTitle${list.idBanner}']").val().isValue()) {
						alert("배너명을 입력하세요.");
						$("input[name='bannerTitle${list.idBanner}']").focus();
						return false;
					}
					
					if ($("select[name='linkType${list.idBanner}'] > option:selected").index() < 1) {
						alert("링크종류을 선택하세요.");
						$("select[name='linkType${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='linkCode${list.idBanner}']").val().isValue()) {
						alert("링크내용을 입력하세요.");
						$("input[name='linkCode${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='start_date${list.idBanner}']").val().isValue()) {
						alert("시작일을 입력하세요.");
						$("input[name='start_date${list.idBanner}']").focus();
						return false;
					}
					
					if (!$("input[name='end_date${list.idBanner}']").val().isValue()) {
						alert("종료일를 입력하세요.");
						$("input[name='end_date${list.idBanner}']").focus();
						return false;
					}
					
					if (!confirm("정말 수정하시겠습니까?")) {
						return false;
					}
				});
			</c:forEach>
			
			$("#deleteConfirm").click(function() {
				if (!confirm("정말 삭제하시겠습니까?")) {
					return false;
				}
			});
		});
	</script>
	<script>
		$(function() {
			$("#searchdiv").hide();
			
			$("#opensearch").click(function() {
				$("#searchdiv").toggle();
				return false;
			});
		});
	</script>
</body>
</html>